<template>
  <div class="down_mian">
    <div class="down_wrap">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/outfit' }"
            >特装</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/booth' }"
            >展会费用缴纳</el-breadcrumb-item
          >
          <el-breadcrumb-item
            >结算清单</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div>
        <el-table :data="leaselist" style="width: 100%">
          <el-table-column prop="name" label="商品信息">
            <template slot-scope="scope">
              <div class="scope">
                <div class="scope_img">
                  <img :src="scope.row.img" alt="" />
                </div>
                <div>{{ scope.row.name }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="规格"> </el-table-column>
          <el-table-column prop="price" label="单价"> </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <!-- <el-input type="number"
                  style="width: 90px" v-model="scope.row.nub"></el-input> -->
              <el-input-number
                v-model="scope.row.nub"
                :min="1"
                :max="10"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="nub" label="小计">
            <template slot-scope="scope">
              <div>{{ scope.row.nub * scope.row.price }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                style="color: #ff0000"
                @click="hanldpath(scope)"
                type="text"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detailed_foot">
        <div>
          租赁服务：已选择 1 个展位，费用合计：
          <span style="color: #ff0000">￥4550.00</span>
        </div>
        <div class="foot_but">
          <div style="margin-right: 20px">
            <el-button @click="hanldgo">返回</el-button>
          </div>
          <div>
            <el-button @click="hanldadd" type="danger">结算</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      leaselist: [
        {
          id: 1,
          name: "布展期间接驳服务",
          price: 200,
          nub: 1,
          ms: "",
          img: require("../../../../static/images/nav/home_ic_fyjn.png"),
        },
        {
          id: 2,
          name: "宽带",
          price: 100,
          nub: 1,
          ms: "",
          img: require("../../../../static/images/nav/home_ic_fyjn.png"),
        },
        {
          id: 3,
          name: "展览期间接驳服务（室内三相电）",
          price: 210,
          nub: 1,
          ms: "",
          img: require("../../../../static/images/nav/home_ic_fyjn.png"),
        },
        {
          id: 4,
          name: "展览期间接驳服务（室内单相电）",
          price: 200,
          nub: 1,
          ms: "",
          img: require("../../../../static/images/nav/home_ic_fyjn.png"),
        },
        {
          id: 5,
          name: "24小时供电",
          price: 220,
          nub: 1,
          ms: "",
          img: require("../../../../static/images/nav/home_ic_fyjn.png"),
        },
      ],
    };
  },
  methods: {
    hanldgo() {
      this.$router.go(-1);
    },
    hanldadd() {
      this.$router.push("/feeOfflinePayment");
    },
  },
};
</script>
<style scoped>
.down_mian {
  background-color: #f2f2f2;
  padding: 20px;
  min-height: 430px;
}
.down_wrap {
  width: 1100px;
  margin: auto;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f2f2f2;
}
/deep/.el-table th.el-table__cell {
  background-color: #f8fcfc !important;
  text-align: center !important;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
.scope {
  display: flex;
}
.scope_img > img {
  width: 50px;
  object-fit: contain;
}
.detailed_foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}
.foot_but {
  display: flex;
}
</style>